<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的订单" autoBack>
			</u-navbar>
		</view>
		<view class="con-body wrap">
			<view style="background-color: #FFFFFF;margin-top: 1px;">
				<u-tabs :list="tabs" lineColor="#0B868E" :current="current" @change="changeTabs">
				</u-tabs>
			</view>
			<view style="width:96%;margin:0 auto;">
				<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
				<view class="main-service" style="min-width: 93%; padding: 10rpx 20rpx;" v-for="(item,index) in releases" :key="index" @click="goodDetail(item.id)">
					<view class="u-flex u-row-between">
						<view style="display: inline-block;padding:20rpx 0;">
							<image class="va_m" style="width:40rpx;height:40rpx;border-radius: 50%;margin-right:10rpx;" src="https://resourse.cnlhjt.com/upload/20220831/1d02e337ec2ba6f1fa845cb89024bfcf.png"></image>
							<text class="va_m" style="font-size: 24rpx;color:#666;">{{item.from}}</text>
							<!-- <u-cell :icon="item.avatar" :border="false" :iconStyle="{width:'40rpx',height:'40rpx',borderRadius: '20rpx'}" :label="item.from"></u-cell> -->
						</view>
						<text style="color:#0B868E;font-size: 26rpx;" v-if="item.older_status==1">已完成</text>
						<text style="color:#ff0000;font-size: 26rpx;" v-if="item.older_status==0">待支付</text>
						<text style="color:#ffaa00;font-size: 26rpx;" v-if="item.older_status==3">待发货</text>
						<text style="color:#ffaa00;font-size: 26rpx;" v-if="item.older_status==4">待收货</text>
					</view>
					
					<view v-if="item.status == 1"
						style="float: right; height: 0rpx; position:relative;top: 10rpx;right: 20rpx;">
						<u-image width="100rpx" height="100rpx" src="https://resourse.cnlhjt.com/upload/20220825/ea67c8c95f615ffa9e2f4d3d81fc4316.png">
						</u-image>
					</view>
					<view class="u-flex u-row-between">
						<image :src="item.images[0]" style="width:29%;height:180rpx;border-radius: 20rpx;" mode="aspectFill"></image>
						<view class="u-rela" style="width:70%;height:180rpx;">
							<view style="margin-top: 10rpx; padding: 0rpx 10rpx;">
								<text style="font-size: 30rpx;">{{item.content}}</text>
							</view>
							
						
							<view class="u-flex u-row-between u-abso" style="bottom:10rpx;width:100%;">
								<view style="display: inline-block;">
									<text class="u-line-1"
										style="color:#E35719; margin-left: 15rpx; font-size: 22rpx;">{{item.theme}}</text>
								</view>
								<view style="display: inline-block;" class="">
									<u-icon name="https://resourse.cnlhjt.com/upload/20220831/58bc5a68ff1e5a5931000ace38371ffb.png" size="18" :label="'￥' +item.price" labelColor="red" labelSize="32rpx"></u-icon>
									
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLatticeOrder
	} from "@/service/shareService.js";
	export default {
		data () {
			return {
				current: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '待支付'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '已完成'
					}
				],
				releases:[],
				showEmpty:false
			}
		},
		onLoad() {
			getLatticeOrder({
				page: this.page,
				limit: this.limit
			}).then(this.getLatticeOrder);
		},
		methods:{
			getLatticeOrder(e){
				if (e.code == 200) {
					this.showEmpty = false;
					this.releases=e.result
				} else{
					this.showEmpty = true;
					this.releases=[]
				}
			},
			changeTabs(e) {
				let par;
				this.current = e.index;
				switch (this.current) {
					case 1:
						par = {
							status: 0
						};
						this.status=0
						break;
					case 2:
						par = {
							status: 3
						};
						this.status=3
						break;
					case 3:
						par = {
							status: 4
						};
						this.status=4
						break;
					case 4:
						par = {
							status: 1
						};
						this.status=1
						break;
					default:
						par = {
							status: 99
						};
				}
				getLatticeOrder(par).then(this.getLatticeOrder);
			},
			goodDetail:function(id){
				uni.navigateTo({
					url:'./latticeOrderDetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	
</style>
